import store from 'store'

const { body } = document
const DESKTOP_WIDTH = 1152
const SMALL_WIDTH = 960
const MINI_WIDTH = 750
const PAD_WIDTH = 600

const DESKTOP = 'desktop'
const SMALL_DESKTOP = 'small-desktop'
const MINI_DESKTOP = 'mini-desktop'
const PAD = 'pad'
const MOBILE = 'mobile'
export default {
  // watch: {
  //   $route(route) {
  //     if (this.device === 'mobile') {
  //       store.dispatch('CloseSideBar', { withoutAnimation: false })
  //     }
  //   }
  // },
  beforeMount() {
    window.addEventListener('resize', this.resizeHandler)
  },
  mounted() {
    this.resizeHandler()
  },
  methods: {
    isMobile() {
      const rect = body.getBoundingClientRect()
      if (rect.width - DESKTOP_WIDTH >= 0) {
        return DESKTOP
      } else if (rect.width - SMALL_WIDTH >= 0) {
        return SMALL_DESKTOP
      } else if (rect.width - MINI_WIDTH >= 0) {
        return MINI_DESKTOP
      } else if (rect.width - PAD_WIDTH >= 0) {
        return PAD
      } else {
        return MOBILE
      }
    },
    resizeHandler() {
      const isMobile = this.isMobile()
      store.dispatch('DeviceChange', isMobile)
      if (isMobile === DESKTOP || isMobile === SMALL_DESKTOP) {
        store.dispatch('ToggleSideBar', false)
        store.dispatch('OpenNavBar', false)
        store.dispatch('OpenAsideBar', false)
      } else {
        store.dispatch('ToggleSideBar', true)
      }
    }
  }
}
